import React, { PureComponent } from 'react'
import { Modal, Form, Input } from 'antd'
// import PropTypes from 'prop-types'

import UploadAvatar from 'components/common/uploadAvatar'
import Style from './userEditModal.css'

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
class EditModalForm extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.imageChange = this.imageChange.bind(this)
    this.onOk = this.onOk.bind(this)
  }

  imageChange (url) {
    this.setState({
      imageUrl: url
    })
  }

  onOk () {
    const { imageUrl } = this.state
    const { staffDetail = {} } = this.props
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (imageUrl) {
          staffDetail.avatar = imageUrl
        }
        staffDetail.name = values.name
        staffDetail.email = values.email
        staffDetail.mobile = values.mobile
        this.setState({
          showModal: false
        })
        staffDetail.center = true
        this.props.onOk(staffDetail)
      }
    })
  }

  render () {
    const { form, staffDetail = {}, showModal, onCancel } = this.props
    const { getFieldDecorator } = form

    return (
      <div className={Style['add-modal']}>
        {
          <Modal
            visible={showModal}
            title='编辑个人信息'
            onCancel={onCancel}
            onOk={this.onOk}
            destroyOnClose>
            <Form {...formItemLayout}>
              <Form.Item label='头像'>
                {getFieldDecorator('avatar', {
                  rules: [{ required: true, message: '请上传头像' }],
                  initialValue: staffDetail.avatar
                })(<UploadAvatar onChange={this.imageChange} />)}
              </Form.Item>
              <Form.Item label='成员姓名'>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入成员姓名' }],
                  initialValue: staffDetail.name
                })(
                  <Input placeholder='请输入' />
                )}
              </Form.Item>
              <Form.Item label='手机号'>
                {getFieldDecorator('mobile', {
                  rules: [{ required: true, message: '请输入成员手机号' }],
                  initialValue: staffDetail.mobile
                })(<Input placeholder='手机号' />)}
              </Form.Item>
              <Form.Item label='邮箱'>
                {getFieldDecorator('email', {
                  rules: [{ required: true, message: '请输入成员邮箱' }, { type: 'email', message: '请输入正确的邮箱' }],
                  initialValue: staffDetail.email
                })(<Input placeholder='邮箱' />)}
              </Form.Item>
              <Form.Item label='部门'>
                {getFieldDecorator('deptName', {
                  initialValue: staffDetail.deptName
                })(
                  <Input placeholder='请输入' disabled />
                )}
              </Form.Item>
              <Form.Item label='权限'>
                {getFieldDecorator('roleName', {
                  initialValue: staffDetail.roleName
                })(
                  <Input placeholder='请输入' disabled />
                )}
              </Form.Item>
            </Form>
          </Modal>
        }
      </div>
    )
  }
}

EditModalForm.propTypes = {
}

const EditModal = Form.create()(EditModalForm)
export default EditModal
